<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css动画</title>
    <style>
      #clickMe {
        width: 200px;
        height: 100px;
        transition-property: background-color;
        transition-duration: 3s;
      }
      #growing {
        width: 200px;
        height: 100px;
        transition: font-size 3s, color 2s;
      }
      .train {
        position: relative;
        left: 0;
        cursor: pointer;
        width: 177px;
        height: 160px;
        transition: all 5s cubic-bezier(0.68, -0.65, 0.27, 0.55);
        /* all 所有属性   cubic-bezier：贝塞尔曲线 */
      }
      .trainTow {
        position: relative;
        left: 0;
        cursor: pointer;
        width: 177px;
        height: 160px;
        transition: left 5s ease-out;
      }
      @keyframes go-left-right {
        /* 指定一个名字："go-left-right" */
        /* 从 left: 0px 开始 */
        /* from {
          left: 0px;
        } 
        to {
          left: calc(100% - 50px);
        }  */

        /* 也可以用百分比写法0%-100% */
        0% {
          left: 0px;
        }
        100% {
          left: calc(100% - 300px);
        }
      }

      .progress {
        animation: go-left-right 6s infinite alternate;
        /* 把动画 "go-left-right" 应用到元素上
          持续 3 秒
          持续次数：infinite
          每次都改变方向
        */

        position: relative;
        border: 2px solid green;
        width: 50px;
        height: 20px;
        background: lime;
      }
    </style>
  </head>
  <body>
    <a href="https://zh.javascript.info/css-animations">css动画</a>
    <button id="clickMe">Click me</button>
    <h3>CSS 提供了四个属性来描述一个过渡：</h3>
    <ul>
      <li>transition-property</li>
      <!-- 
        transition-property 中我们可以列举要设置动画的所有属性，如：left、margin-left、height 和 color
        all 表示应用在所有属性上
      -->
      <li>transition-duration</li>
      <!-- transition-duration 允许我们指定动画持续的时间。时间的格式参照 CSS 时间格式：单位为秒 s 或者毫秒 ms -->
      <li>transition-timing-function</li>
      <!-- 时间函数描述了动画进程在时间上的分布。它是先慢后快还是先快后慢？ -->
      <li>transition-delay</li>
      <!-- transition-delay 允许我们设定动画开始前的延迟时间。例如，对于 transition-delay: 1s，动画将会在属性变化发生 1 秒后开始渲染 -->
    </ul>

    <button id="growing">Click me</button> <br />
    <img
      class="train"
      src="./img/train.jpg"
      onclick="this.style.left='1000px'"
      alt=""
    />
    <br />
    <img
      class="trainTow"
      src="./img/train.jpg"
      onclick="this.style.left='1000px'"
      alt=""
    />

    <div class="progress">关键帧动画 @keyframes</div>

    <script>
      clickMe.onclick = function () {
        this.style.backgroundColor = "blue";
      };
      growing.onclick = function () {
        this.style.fontSize = "36px";
        this.style.color = "red";
      };
    </script>
  </body>
</html>
